<template>
  <div>
    <template v-if="edit && lang_enable">
      <!--v-on="$listeners"-->
      <a-input @change="change"
               v-model="name"
               v-bind="$attrs">
        <a-tooltip :title="title" slot="prefix">
          <ych-icon type="global" :style="style"/>
        </a-tooltip>
        <ych-icon slot="addonAfter" type="setting" @click="openDialog"/>
      </a-input>
      <locale-select-dialog ref="dialog"
                            :group-id="groupId"
                            :currentTable="currentTable"
                            @selected="selected">
      </locale-select-dialog>
    </template>
    <template v-else-if="!edit && lang_enable">
      <a-tooltip :title="title" v-if="name">
        <ych-icon type="global" :style="style"/>
      </a-tooltip>
      {{ name }}
    </template>
    <template v-else-if="edit && !lang_enable && !isVxe">
      <a-input @change="change"
               v-model="name"
               v-bind="$attrs">
      </a-input>
    </template>
    <template v-else-if="edit && !lang_enable && isVxe">
      <vxe-input @change="change"
               v-model="name"
               v-bind="$attrs">
      </vxe-input>
    </template>
    <template v-else-if="!edit && !lang_enable">
      {{ name }}
    </template>
  </div>
</template>

<script>

import LocaleSelectDialog from './LocaleSelectDialog'
import LocaleUtil from "../../../../utils/LocaleUtil";

export default {
  name: 'LocaleTag',
  components: {
    LocaleSelectDialog,
  },
  props: {
    value: String,
    groupId: String,
    currentTable: String,
    edit: {
      type: Boolean,
      default: true
    },
    isVxe: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      name: null,
      locale: false,
      title: '',
      lang_enable: bootConfig[process.env.NODE_ENV].VUE_APP_LOCALE_ENABLE
    }
  },
  computed: {
    style() {
      const style = {}
      if (this.locale) {
        if (this.name === this.value) {
          style['color'] = 'red'
          this.title = `${this.$t('m.eform.localeProvider.label.locale_tag')}：${this.value}，${this.$t('m.eform.localeProvider.label.locale_tag_error')}`
        } else {
          style['color'] = 'green'
          this.title = `${this.$t('m.eform.localeProvider.label.locale_tag')}：${this.value}，${this.$t('m.eform.localeProvider.label.locale_tag_ok')}`
        }
      } else {
        style['color'] = 'grey'
        this.title = this.$t('m.eform.localeProvider.label.default_tag')
      }
      return style
    }
  },
  watch: {
    value: {
      handler() {
        this.initName()
      },
      immediate: true
    },
    '$store.getters.locale': {
      handler() {
        this.initName()
      }
    }
  },
  methods: {
    initName() {
      if (LocaleUtil.containsLocaleKey(this.value)) {
        this.name = this.$locale(this.value)
        this.locale = true
      } else {
        this.name = this.value
        this.locale = false
      }
    },
    openDialog() {
      if (this.$attrs.readOnly || this.$attrs.disabled) {
        return
      }
      this.$refs.dialog.visible = true
    },
    selected(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
    change() {
      this.$emit('input', this.name)
      this.$emit('change', this.name)
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>
